<!DOCTYPE html>
<html>
<head>
<title>貪食蛇</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<p>Score: <span id="score"></span></p> <!-- 顯示分數 -->
<div class="container"> <!-- 遊戲區域 -->
<div id="game-board"> <!-- 遊戲畫面 -->
<img id="Image" src="" alt="隨機圖片"> <!-- 隨機圖片 -->
<div id="player"></div> <!-- 貪食蛇 -->
<div id="target"></div> <!-- 目標 -->
</div>
<button id="bt1">switch</button> <!-- 切換圖片按鈕 -->
<script src="myjs.js"></script> <!-- 引入js -->
</div>
</body>
</html>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
#player {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
#target {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
#randomImage {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
.container {
margin: 0;
padding: 10%;
display: flex;
justify-content: center;
align-items: center;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #b30000;
}
button:active {
background-color: #710080;
}
button:disabled {
background-color: #e9ecef;
color: #6c757d;
cursor: not-allowed;
}
#Image{
width: 400px;
max-height: 100%;
position: relative;
top: 0;
left: 0;
}
主要設定玩家大小、目標大小、遊玩範圍、button的小效果,以及更換背景圖片的圖片。
接下來進入重點,js的部分,是其最多也最複雜的部份。我一步一步講解,首先要把html裡的元素讓js能抓取到,只用的方法不外乎就是getElementById之類的。
var gameBoard = document.getElementById('game-board');
var player = document.getElementById('player');
var target = document.getElementById('target');
var scoreElement = document.getElementById('score');
設定初值:
var playerX = 0;
var playerY = 0;
var score = 0;
寫目標物生成的函數:
function target_generate() {
var targetX = Math.floor(Math.random() * (gameBoard.offsetWidth - target.offsetWidth));
var targetY = Math.floor(Math.random() * (gameBoard.offsetHeight - target.offsetHeight));
target.style.top = targetY + 'px';
target.style.left = targetX + 'px';
}
target_generate();
寫判斷玩家+1分的函式,也就是玩家碰到目標物。
function areElementsTouching(element1, element2) {
const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
const isTouching = !(rect2.left > rect1.right ||
rect2.right < rect1.left ||
rect2.top > rect1.bottom ||
rect2.bottom < rect1.top);
return isTouching;
}
接下來就剩玩家移動,與執行target_generate()的function。
function movePlayer(event) {
var key = event.keyCode;
var step = 5;
switch (key) {
case 37: // Left arrow
playerX -= step;
break;
case 38: // Up arrow
playerY -= step;
break;
case 39: // Right arrow
playerX += step;
break;
case 40: // Down arrow
playerY += step;
break;
}
player.style.top = playerY + 'px';
player.style.left = playerX + 'px';
if (areElementsTouching(player, target)) {
target_generate();
score = score + 1;
scoreElement.innerHTML = score;
}
}
這樣基本上就完成了,剩下一些美化的部分,我下面把全部的程式碼貼上。
var gameBoard = document.getElementById('game-board');
var player = document.getElementById('player');
var target = document.getElementById('target');
var scoreElement = document.getElementById('score');
var playerX = 0;
var playerY = 0;
var score = 0;
function target_generate() {
var targetX = Math.floor(Math.random() * (gameBoard.offsetWidth - target.offsetWidth));
var targetY = Math.floor(Math.random() * (gameBoard.offsetHeight - target.offsetHeight));
target.style.top = targetY + 'px';
target.style.left = targetX + 'px';
}
target_generate();
function movePlayer(event) {
var key = event.keyCode;
var step = 5;
switch (key) {
case 37: // Left arrow
playerX -= step;
break;
case 38: // Up arrow
playerY -= step;
break;
case 39: // Right arrow
playerX += step;
break;
case 40: // Down arrow
playerY += step;
break;
}
player.style.top = playerY + 'px';
player.style.left = playerX + 'px';
if (areElementsTouching(player, target)) {
target_generate();
score = score + 1;
scoreElement.innerHTML = score;
}
}
function areElementsTouching(element1, element2) {
const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
const isTouching = !(rect2.left > rect1.right ||
rect2.right < rect1.left ||
rect2.top > rect1.bottom ||
rect2.bottom < rect1.top);
return isTouching;
}
document.addEventListener('keydown', movePlayer);
const imgElement = document.getElementById('Image');
const imageUrls = [
'img1.jpg',
'img2.jpg',
'img3.jpg',
];
var i = 0;
function img_generate() {
const InedxImageUrl = imageUrls[i++ % imageUrls.length];
imgElement.src = InedxImageUrl;
}
const myButton = document.getElementById('bt1');
img_generate();
myButton.addEventListener('click', function () {
img_generate();
});
圖片必須自己放。
然後可以發現,這樣玩家是可以超出到遊戲範圍外面的,因為我忘記寫了XD。